<template>
  <div class="login">
    <h3 style="color:white;margin:0px;cursor: pointer;" @click="toShops">点击这里直接进入商城</h3>
    <div id="bigBox">
        <h1>LOGIN</h1>
        <span class="manage_login" @click="manageLogin">进入后台</span>
        <div class="inputBox">
            <div class="inputText">
                <span class="iconfont icon-nickname"></span>
                <input ref="username" type="text" placeholder="Username" @keyup.enter="login"  />
            </div>
            <div class="inputText">
                <span class="iconfont icon-visible"></span>
                <input ref="password" type="password" placeholder="Password"  @keyup.enter="login" />
            </div>
            <p class="register_login" @click="register">注册用户？</p>
        </div>
        <input class="loginButton" type="button" @click="login" value="Login" />
    </div>
  </div>
</template>
<script>
import { login,findByUserInfo } from "@/js/api/home";
  export default {
    name: 'login',
    components:{
    },
    data(){
      return {
        token: null,
        form:{
          userName: 'admin',
          password: 'pass',
          rememberMe: 1
        },
        userInfo:{},
        rules: {
          userName:[
            {required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password:[
            {required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
    },
    methods: {
      register(){
        this.$router.push({path: "/register"})
      },
      login(){
        let obj = {
          username: this.$refs.username.value,
          password: this.$refs.password.value
        }
        if(obj.username == "" || obj.password == ""){
          this.utils.tips.error("请将内容输入完整再提交")
        }else{
          login(obj).then(response=>{
            if(response.data.state){
              this.$store.commit('login', {identitytoken: response.data.data})
              window.localStorage.setItem('token',response.data.data)
              findByUserInfo({username:obj.username}).then(response=>{
                if(response.data.state){
                  let info = JSON.parse(response.data.data)
                  window.localStorage.setItem('userName',info.aName)
                  window.localStorage.setItem('userId',info.id)
                  this.utils.tips.success("登录成功！欢迎您，"+info.aName)
                  this.$store.commit('saveUserInfo', info)
                }
              })
              this.$router.push({path: "/"})
            }else{
              this.utils.tips.error(response.data.msg)
            }
          })
        }
      },
      manageLogin(){
        this.$router.push({path: '/manage'});
      },
      toShops(){
        this.$router.push({path: '/home'});
      }
    }
  }
</script>
<style lang="less">
  @import "~@/less/login2.less";
  .manage_login{
    float: right;
    color:white;
    cursor: pointer;
  }
  .register_login{
    color:white;
    font-size:10px;
    margin-right:110px;
    cursor: pointer;
  }
</style>